<template>
	<u-popup :show="localVisible" mode="center" round="16" :disable-scroll='true' :customStyle="{ padding: '20rpx', position: 'relative' }"
	:closeable="true"
	close-icon="close"       
	:closeOnClickOverlay="true"
	  close-icon-pos="top-right"

		@close="handleClose">
		
		<view style="width: 750rpx ;height: 1250rpx;">
			<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
				:openSmooth="openSmooth" v-if="localVisible"></l-signature>

		</view>
		<view style="padding-bottom: 50px;">
			<u-button @click="onClick('clear')">清空</u-button>
			<u-button @click="onClick('save')">保存</u-button>
			<u-button @click="handleClose()">关闭</u-button>
			<!-- <u-button @click="onClick('undo')">撤消</u-button> -->
		</view>
	</u-popup>
</template>



<script>
	var x = 20;
	var y = 20;
	export default {
		props: {
			// 控制弹窗显示
			visible: false,
			// 物料数据对象
			materialData: {}
		},

		data() {
			return {
				title: 'Hello',
				penColor: 'red',
				penSize: 5,
				openSmooth: true,

				sign: '',
				localVisible: this.visible,
				isDrive: false,
				ctx: '', //绘图图像
				points: [] //路径点集合 
			}
		},
		watch: {
			visible: {
				immediate: true,
				handler(newVal) {

				}
			},

		},
		methods: {
			handleClose() {
				// 关闭时更新本地状态
				this.localVisible = false;
				this.$emit('update:visible', false)
				this.$emit('close')
			},

			onClick(type) {
				if (type == 'openSmooth') {
					this.openSmooth = !this.openSmooth
					return
				}
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: async  (res) => {
							if (res.isEmpty) {
								this.$uti.alert('请输入签名')
								return
							}

							// 生成图片的临时路径
							// H5 生成的是base64


							// 平台处理逻辑
							let base64Data = '';
							// #ifdef H5
							// H5平台直接使用base64
							base64Data = res.tempFilePath;
							// #endif

							// #ifndef H5
							// 非H5平台转换临时路径为base64
							try {
								base64Data = await this.convertTempFileToBase64(res.tempFilePath);
							} catch (error) {
								console.error('转换Base64失败:', error);
								uni.showToast({
									title: '转换失败，请重试',
									icon: 'none'
								});
								return;
							}
							// #endif

							// 赋值并传递Base64
							this.sign = base64Data;
							this.$emit('update-value', this.sign);
							this.handleClose();


						},
						fail: (err) => {
							console.error('保存失败:', err);
							uni.showToast({
								title: '保存失败，请重试',
								icon: 'none'
							});
						}
					}, this)
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			},
			convertTempFileToBase64(tempFilePath) {
				return new Promise((resolve, reject) => {
					const fs = uni.getFileSystemManager();
					fs.readFile({
						filePath: tempFilePath,
						encoding: 'base64', // 指定base64编码
						success: (res) => {
							// 添加Base64前缀（根据实际图片格式调整）
							const base64 = `data:image/png;base64,${res.data}`;
							resolve(base64);
						},
						fail: (err) => reject(err)
					});
				});
			}



		},
	}
</script>

<style>
	.close-btn {
		position: absolute;
		top: 16rpx;
		right: 16rpx;
		z-index: 10;
		padding: 16rpx;
	}
	.title {
		height: 50upx;
		line-height: 50upx;
		font-size: 16px;
	}

	.mycanvas {
		width: 100%;
		height: 400rpx;
		height: calc(100vh - 200upx);
		background-color: #ECECEC;
	}

	.footer {
		font-size: 16px;
		height: 150upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.left,
	.right {
		line-height: 100upx;
		height: 100upx;
		width: 250upx;
		text-align: center;
		font-weight: bold;
		color: white;
		border-radius: 5upx;
	}

	.left {
		background: #007AFF;
	}

	.right {
		background: orange;
	}
</style>